<template>
    <div class="order-nav">
        <div class="order-nav-top">
            <div class="order-nav-title">我的订单</div>
            <div
                class="order-more-btn"
                @click="goOrderList(0)"
            >查看全部</div>
        </div>
        <div class="order-nav-box">
            <div
                class="nav-item"
                v-for="(item,index) of navList"
                :key="index"
                @click="goOrderList(item.navType)"
            >
                <img
                    class="nav-item-icon"
                    :src="item.navIcon"
                />
                <div class="nav-item-name">{{item.navName}}</div>
                <div
                    class="nav-item-num"
                    v-if="item.navNum>0"
                >{{item.navNum}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'UserOrder',
    data() {
        return {
            navList: [
                {
                    navType: 1,
                    navName: '待付款',
                    navIcon: require('@/assets/images/userCenter/order-nav-1.png'),
                    navNum: 0
                },
                {
                    navType: 2,
                    navName: '待发货',
                    navIcon: require('@/assets/images/userCenter/order-nav-2.png'),
                    navNum: 0
                },
                {
                    navType: 3,
                    navName: '待收货',
                    navIcon: require('@/assets/images/userCenter/order-nav-3.png'),
                    navNum: 0
                },
                {
                    navType: 4,
                    navName: '待评价',
                    navIcon: require('@/assets/images/userCenter/order-nav-4.png'),
                    navNum: 0
                },
                {
                    navType: 5,
                    navName: '退换/售后',
                    navIcon: require('@/assets/images/userCenter/order-nav-5.png'),
                    navNum: 0
                }
            ]
        }
    },
    mounted() {
        this.getNavNum()
    },
    methods: {
        goOrderList(value) {
            if (value == 4) {
                this.$router.push('/commentList')
            } else if (value == 5) {
                this.$router.push('/refundOrder')
            } else {
                this.$router.push({
                    path: '/orderList',
                    query: { orderType: value }
                })
            }
        },
        getNavNum() {
            this.axios.post('/api/orders/count.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.navList[0].navNum = data.data.unpay
                    this.navList[1].navNum = data.data.unship
                    this.navList[2].navNum = data.data.unreceived
                    this.navList[3].navNum = data.data.uncomment
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.order-nav
    margin-top 0.18rem
    padding 0.4rem 0
    background #fff
    .order-nav-top
        display flex
        justify-content space-between
        align-items center
        padding 0 0.34rem
        .order-nav-title
            font-weight bold
            font-size 0.37rem
            color #131313
            line-height 1
        .order-more-btn
            font-size 0.37rem
            color #888
            line-height 1
    .order-nav-box
        display flex
        align-items center
        justify-content space-between
        margin-top .58rem
        padding 0 0.8rem
        .nav-item
            position relative
            text-align center
            .nav-item-icon
                display block
                width 0.66rem
                height 0.66rem
                margin 0 auto
            .nav-item-name
                font-size 0.29rem
                color #666
                margin-top 0.4rem
            .nav-item-num
                position absolute
                top -0.26rem
                right -.1rem
                width 0.52rem
                height .52rem
                line-height 0.58rem
                text-align center
                background #d7463c
                border-radius 100%
                font-size 0.32rem
                color #fff
</style>


